<template>
  <div class="page-container">
    <div class="common-content-wrap">
      <TrTable
        ref="trTable"
        isNeedSelection
        :btnList="btnList"
        :total="totalNum"
        v-model="searchParams"
        :searchShowList="searchShowList"
        :searchHideList="searchHideList"
        :tableColumn="tableColumn"
        requestName="searchHandle"
        :tableData="assTableData"
        @add="operateHandle($event, 'add')"
        @export="operateHandle($event, 'export')"
        @remove="operateHandle($event, 'remove')"
        @view="operateHandle($event, 'view')"
        @rowRemove="operateHandle($event, 'rowRemove')"
        @rowEdit="operateHandle($event, 'rowEdit')"
      />
      <TrEditPopup
        v-model="isShowEdit"
        :width="480"
        :title="checkTitle"
        :valueObj.sync="formObj"
        :formData="formData"
        :list="popupList"
        @close="isShowEdit = false"
        @confrim="confrimHandle"
      />
      <TrDetail
        v-model="isShowDetailPopup"
        :leftList="detailList"
        statusModel="hidden"
        :detailData="detailData"
        :isNeedFooter="false"
        @close="closeDetailPopup"
      />
    </div>
  </div>
</template>

<script>
import { findByProperty } from "@/utils/util";
import enumData from "@/utils/enumCode.js";
import TrTable from "@/components/Tr-table/Tr-table.vue";
import TrDetail from "@/components/Tr-detail/Tr-detail.vue";
import TrEditPopup from "@/components/Tr-edit/Tr-edit-popup.vue";
import {
  getList,
  getDetail,
  remove,
  add,
  edit,
} from "@/api/baseCode/assetBrand";
export default {
  components: {
    TrTable,
    TrDetail,
    TrEditPopup,
  },
  name: "AssetBrandBox",
  data: () => ({
    tableColumn: [
      {
        type: "text",
        label: "品牌编码",
        value: "brandCode",
      },
      {
        type: "text",
        label: "品牌名称",
        value: "brandName",
      },
      {
        type: "text",
        label: "资产类型",
        value: "assetsTypeName",
      },
      {
        type: "text",
        label: "品牌描述",
        value: "remark",
      },
      {
        type: "text",
        label: "创建人员",
        value: "createUserName",
      },
      {
        type: "text",
        label: "创建时间",
        value: "createTime",
      },
      {
        type: "text",
        label: "修改人员",
        value: "updateUserName",
      },
      {
        type: "text",
        label: "修改时间",
        value: "updateTime",
      },
      {
        type: "option",
        label: "操作",
        fixed: "right",
        width: 120,
        showBtnList: [
          {
            label: "查看",
            option: "view",
          },
        ],
        hideBtnList: [
          {
            label: "删除",
            option: "rowRemove",
          },
          {
            label: "编辑",
            option: "rowEdit",
          },
        ],
      },
    ],
    searchHideList: [
      {
        id: "brandCode",
        type: "input",
        width: 33.33,
        label: "品牌编码",
        value: "",
      },
      {
        id: "brandName",
        type: "input",
        width: 33.33,
        label: "品牌名称",
        value: "",
      },
      {
        id: "assetsType",
        type: "select",
        width: 33.33,
        label: "资产类型",
        value: "",
        list: [],
      },
      {
        id: "remark",
        type: "input",
        width: 33.33,
        label: "品牌描述",
        value: "",
      },

      {
        startStr: "updateTimeStart",
        endStr: "updateTimeEnd",
        id: "modifyTime",
        type: "daterange",
        width: 80,
        label: "修改时间",
        value: [],
        radio: -1,
        timePeriod: true,
      },
    ],
    searchShowList: [
      {
        isNeed: true,
        startStr: "createTimeStart",
        endStr: "createTimeEnd",
        id: "createdTime",
        type: "daterange",
        width: 80,
        label: "创建时间",
        value: [],
        radio: 1,
        timePeriod: true,
      },
    ],
    btnList: [
      {
        label: "新增",
        option: "add",
        color: "blue",
      },
      {
        label: "导出",
        option: "export",
        color: "white",
      },
      {
        label: "删除",
        option: "remove",
        color: "white",
        isRelaTable: true,
      },
    ],
    popupList: [
      {
        label: "品牌编码",
        type: "input",
        width: 100,
        value: "",
        id: "brandCode",
      },
      {
        label: "品牌名称",
        type: "input",
        width: 100,
        value: "",
        id: "brandName",
      },
      {
        label: "资产类型",
        type: "select",
        width: 100,
        list: [],
        value: "",
        id: "assetsType",
      },
      {
        label: "品牌描述",
        type: "textarea",
        width: 100,
        value: "",
        id: "remark",
        isNeed: false,
      },
    ],
    assTableData: [],
    assetsTypeEnum: [],
    detailList: [
      {
        type: "text",
        label: "基础信息",
        list: [
          {
            text: "品牌编码",
            id: "brandCode",
            width: 50,
          },
          {
            text: "品牌名称",
            id: "brandName",
            width: 50,
          },
          {
            text: "资产类型",
            id: "assetsType",
            width: 50,
          },
          {
            text: "品牌描述",
            id: "remark",
            width: 100,
          },
        ],
      },
    ],
    detailData: {},
    formObj: {},
    formData: {},
    searchParams: {
      assetsType: "",
      brandCode: "",
      brandName: "",
      createTimeEnd: "",
      createTimeStart: "",
      remark: "",
      updateTimeEnd: "",
      updateTimeStart: "",
      current: 1,
      size: 10,
    },
    totalNum: 0,
    currentHandle: "add",
    isShowEdit: false,
    editId: "",
    isShowDetailPopup: false,
  }),
  methods: {
    operateHandle(val, type) {
      this.currentHandle = type;
      this.editId = val.id;
      this.$validateData(val, 3);
      this.formData = type == "add" ? {} : val;
      switch (type) {
        case "add":
          this.isShowEdit = true;
          break;
        case "export":
          this.$exportHandle({ vm: this, params: this.searchParams });
          break;
        case "remove":
          this.remove(this.ids);
          break;
        case "view":
          this.getDetail(val.id);
          break;
        case "rowEdit":
          this.isShowEdit = true;
          break;
        case "rowRemove":
          this.remove([val.id]);
          break;
        default:
          console.log("11");
          break;
      }
    },
    closeDetailPopup() {
      this.isShowDetailPopup = false;
    },
    confrimHandle() {
      if (this.currentHandle == "rowEdit") {
        this.formObj.id = this.editId;
        console.log(this.formObj);
        this.edit(this.formObj);
      } else if (this.currentHandle == "add") {
        this.add(this.formObj);
      }
      this.isShowEdit = false;
    },
    searchHandle() {
      this.getMenuList();
    },
    remove(ids) {
      this.$textShow({
        title: this.$t("tip.label"),
        content: [this.$t("tip.delete")],
      })
        .then(async () => {
          let res = await remove({ ids });
          if (res.data.code != 200) return;
          this.$message.success(this.$t("msg.success"));
          this.$refs.trTable.clearSelect();
          this.getMenuList(0);
        })
        .catch(() => {});
    },
    add(params) {
      add(params).then((res) => {
        if (res.data.code != 200) return;
        this.$message.success(this.$t("msg.success"));
        this.isShowEdit = false;
        this.getMenuList(0);
      });
    },
    async edit(params) {
      let res = await edit(params);
      if (res.data.code != 200) return;
      this.$message.success(this.$t("msg.success"));
      this.getMenuList(0);
    },
    async getDetail(id) {
      let res = await getDetail({ id });
      if (res.data.code != 200) return;
      this.$validateData(res.data.data);
      this.detailData = res.data.data;
      this.detailData.assetsType = this.convertAssetsType(
        res.data.data.assetsType
      );
      this.isShowDetailPopup = true;
    },
    async getEnmuData() {
      const { ["PC-ASSETS-TYPE"]: assetsType } = await this.$fetchEnumData([
        enumData.assetsType,
      ]);
      this.assetsTypeEnum = assetsType;
      let assetsType1 = findByProperty(this.searchHideList, "id", "assetsType");
      let assetsType2 = findByProperty(this.popupList, "id", "assetsType");
      console.log(assetsType1, assetsType2);
      this.$set(assetsType1, "list", assetsType);
      this.$set(assetsType2, "list", assetsType);
      //获取字典值后再请求分页数据
      // this.$refs.trTable.initSearch();
    },
    getMenuList() {
      getList(this.searchParams).then((res) => {
        if (res.data.code != 200) return;
        let data = res.data.data;
        this.$validateData(data);
        this.assTableData = data.records.map((item) => {
          return {
            ...item,
            assetsTypeName: this.convertAssetsType(item.assetsType),
          };
        });
        this.totalNum = data.total;
      });
    },
    convertAssetsType(val) {
      let convertName = "";
      this.assetsTypeEnum.forEach((item) => {
        if (item.value == val) {
          convertName = item.label;
        }
      });
      return convertName == "" ? val : convertName;
    },
  },
  mounted() {
    this.getEnmuData();
  },
  computed: {
    checkTitle() {
      return this.currentHandle == "add"
        ? "新增"
        : this.currentHandle == "rowEdit"
        ? "编辑"
        : "-";
    },
    ids() {
      let ids = [];
      this.$refs.trTable.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids;
    },
  },
};
</script>

<style></style>
